标签: angular5

以前我的应用程序正在使用Angular 4.4.6.我按照指南 https://angular-update-guide.firebaseapp.com/更新到Angular 5.我使用了这个:

npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'

但它没有用.它会给我一个错误no valid target found for rxjs.所以相反,我只是更改了我的package.json中的版本并运行npm install并且它工作,但是当运行npm start时,我收到错误

WARNING in ./~/@angular/core/esm5/core.js
6456:15-102 Critical dependency: the request of a dependency is an expression

所以我删除了我的node_modules并再次进行了npm安装,运行npm start时仍然遇到同样的错误.

截图:

我正在尝试启动需要Popper.Js功能的培训项目.但是,它似乎并没有让我开始使用Popper.Js.

根据Bootstrap的文档,我开始使用Popper.Js

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

我在主要组件中使用它ngOnInit.但是,它不起作用.发生错误" 属性'工具提示'在类型'JQuery'上不存在 ".我导入了jquery和bootstrap包文件.安装所有库的类型.

我也试过纯粹的"popper.js"而不是bootstrap.bundle.js.但是会发生同样的错误.Bootstrap.bundle.js(包括正确顺序的bootstrap和popper.js)和jquery在angular-cli.json中导入.

我正在尝试使用Angular Service Worker,除了dataGroups不适合我之外,一切正常.

这就是我的意思ngsw-config.json:

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/shipments/**"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]

在我的网络选项卡中,我看到服务工作者总是进行服务器调用然后回退到缓存.见附图.

dataGroups - 性能

请注意,我正在调用的API位于不同的服务器上,localhost vs some-server:8000,我尝试了不同的使用不同的URL: "/shipments/**" "/shipments" "http:some-server:8000/shipments/**"....等但没有一个工作.

我的环境:
- @angular 5.1.1
- Service-Worker 5.1.2
- Angular-Cli 1.6.0

谢谢

我正在使用Angular更新一个旧网站,我必须满足的一个要求是所有路由都应该保持原样(出于搜索引擎优化的目的).

很多老网站的路线完成以斜杠(像/my/route/),其中一些完成了.html,像/my/route.html.

问题是routerLink删除了每个路由中的最后一个斜线(斜线是我的路线/my/route).

如何routerLink保持尾随斜线？

这里可以看到一个很好的例子:AngularTrailingSlash.

构建angular5应用程序.该应用程序需要一些备用布局.

我的方法是处理主app模块路由文件中的高级路由.所述文件将路由映射到模块.对于非必要的速度驱动页面,模块将延迟加载,而不是为速度关键页面延迟加载:

app-layout-router.module.ts 文件:

import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {PublicLayoutModule} from '@modules/layouts/public/public-layout.module';
import {AuthenticatedLayoutModule} from '@modules/layouts/authenticated/authenticated-layout.module';

const routes: Routes = [{
    path: '',
    loadChildren: () => PublicLayoutModule,
},{
    path: 'dashboard',
    loadChildren: () => AuthenticatedLayoutModule,
}];

@NgModule({
    imports: [RouterModule.forRoot(
        routes,
        {
            useHash: false,
            preloadingStrategy: PreloadAllModules
        }
    )],
    exports: [RouterModule],
})

export class AppLayoutRouter {
}

不在仪表板下的所有路线都将根据SEO原因进行预渲染.但是,在经过身份验证的布局中,我可以选择通过延迟加载后续模块来中断应用程序.例如,这是经过身份验证的模块路由器文件的内容:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AuthenticatedLayoutComponent} from './authenticated-layout.component';

const routes: Routes = [{
    path: …

我正在从事基于角度的项目。我正在使用数据表来显示数据。当我尝试在表上进行一些修改时，出现以下错误。

DataTables警告：表ID = DataTables_Table_0-无法重新初始化DataTable。有关此错误的更多信息，请参见http://datatables.net/tn/3

我的角度通用项目中有多个组件。当我从home组件路由到其他组件时，我只会在页面源中获取home组件的内容。路由组件未更新它。

我已经通过服务器端的console.log检查了是否每个组件都在服务器端呈现，但是它只是加载主页，其他组件没有在服务器端呈现。

我使用npm run build：ssr进行构建，使用npm run serve：ssr进行服务器端服务。

在cmd或浏览器控制台中运行上述命令时，也没有错误。

有人可以帮忙吗？我在这个问题上停留了大约一个星期。

如果您需要有关该项目的其他信息，请告诉我。

Package.json

"dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/platform-server": "^5.2.8",
    "@angular/router": "^5.2.0",
    "@ngu/carousel": "^1.4.8",
    "@nguniversal/express-engine": "^5.0.0-beta.6",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.6",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "ng2-nouislider": "^1.7.7",
    "ngx-bootstrap": "^2.0.0-beta.8",
    "nouislider": "^11.0.3",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.6",
    "ts-loader": "^3.5.0",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60", …

ag-grid提供了一种使用api.getSelectedRows()函数获取选定行的方法。并提供一种使用api.setRowData([])功能设置所有行的方法。我正在寻找某种东西getAllRows()来返回网格中的所有行。我知道有一种方法可以使用api.forEachNode()etc 遍历所有行。有什么办法可以获取整个行数组？

我正在使用带有ag-grid数据表的角度5，我无法使用cellRenderer从单元格触发点击事件，这里如何使用我的ag-grid-> colDefs

this.columnDefs = [
            {headerName: '#', rowDrag: true, width: 75},
            {headerName: 'One', field: 'fieldName',
                cellRenderer : function(params){
                    return '<div><button (click)="drop()">Click</button></div>'
                }
            }
];

drop() {
    alert("BUTTON CLICKEFD")
}

如果正在使用 onClick="alert("123")" ->它有效，但是我无法使用onClick="drop()"它会抛出未定义的信息，

我也在cellRenderer内部尝试过-> params = params.$scope.drop = this.drop;

如果在使用gridOptions angularCompileRows : true时抛出错误，Cannot read property '$apply' of undefined. 是否需要安装ag-grid enterprise？

我正在使用Angular 5应用，正在将其托管在Apache2.4 http服务器上，并使用代理模块对其进行重定向 http://localhost:7777/test/

我的第一个问题是调用从浏览器服务时，它是使用http://localhost:7777/作为基本URL，从我的测试服务中删除斜杠尽快解决，/service1/upload给service1/upload。所以我从http://localhost:7777/service1/upload到了http://localhost:7777/test/service1/upload。

现在我image.png在Assets /文件夹中还有一个其他未解决的问题，它一直试图从中获取它，http://localhost:7777/assets/image.png而不是http://localhost:7777/test/assets/image.png

我测试了第二个URL，它按要求返回了我的图像。如何使Angular 5相对地找到我的资产路径？以我为例http://localhost:7777/test/assets/image.png

这是我访问HTML图像的方法：

..
<img  src='assets/stop_pic.PNG' > 
..

我的基本href在我的index.html中：

<base href="">

我的angular-cli.json conf：

...    
apps": [
        {
          "root": "src",
          "outDir": "../src/main/resources/static",
          "assets": [
            "assets"
          ],
          "index": "index.html",
          "main": "main.ts",
          "polyfills": "polyfills.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          "prefix": "app",
          "styles": [
            "styles.css"
          ],
          "scripts": [],
          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
    ...