标签: angular5

我们有一个使用Auth0来处理所有授权要求的Angular 5应用程序。它已经开发了大约一年。因此，我们最初从Angular2开始，分别升级到3、4和5。缓慢的加载时间一直是一个问题。

我们在项目中使用npm auth0 sdk。它托管在s3存储桶中。该项目使用angular-cli来构建webpack。

其他人有没有经历过？有已知的解决方案吗？我们使用uglify缩小一切。锁定屏幕迅速显示，但是提交用户名/密码以击中回调/服务器身份验证然后加载仪表板的整个过程需要20-30秒。感觉就像一辈子。

我将附加我们的angular-cli.json文件和package.json文件，以使您了解应用程序中的全部内容。

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ng2angle"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "app/core/preloader/preloader.scss",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "app/core/preloader/preloader.js",
        "../node_modules/flot/jquery.flot.js",
        "../node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.js",
        "../node_modules/flot/jquery.flot.resize.js",
        "../node_modules/flot/jquery.flot.pie.js",
        "../node_modules/flot/jquery.flot.time.js",
        "../node_modules/flot/jquery.flot.categories.js",
        "../node_modules/easy-pie-chart/dist/easypiechart.js",
        "../node_modules/chart.js/dist/Chart.bundle.js",
        "../node_modules/bootstrap/js/modal.js",
        "../node_modules/bootstrap/js/dropdown.js",
        "../node_modules/bootstrap/js/tooltip.js",
        "../node_modules/summernote/dist/summernote.js",
        "../node_modules/moment/min/moment-with-locales.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "staging": "environments/environment.staging.ts"
      }
    }
  ],
  "e2e": { …

我无法使用AOT(ng build --prod)编译我的Angular 5应用程序.问题是什么？

找不到模块:错误:无法解析'C:\ Projects\app-dnn-sxc-angular-dev\src'中的'./app/app.module.ngfactory'@ ./src/main.ts 3: 0-66 @ multi ./src/main.ts

我们正在开发此应用程序以dnn-sxc-angular使用Angular 5 测试我们的npm项目.一旦ContentManagerModule从中导入@2sic.com/dnn-sxc-angular,AOT构建就会失败.

我跑了,node_modules/.bin/ngc.cmd但没有出现错误.有没有办法调试构建过程或获取人类可读的错误消息？

破解的演示应用程序:https: //github.com/2sic/app-dnn-sxc-angular-dev

dnn-sxc-angular(与Angular 4合作):https: //github.com/2sic/dnn-sxc-angular

项目结构

我的环境:

• Windows 10
• npm:5.6.0
• 节点:8.9.3
• 角度cli(本地和全球):1.6.1

完整输出webpack --bail:

C:\ Projects\app-dnn-sxc-angular-dev> webpack --bail 11%构建模块9/9模块0 activeModuleNotFoundError:找不到模块:错误:无法解析'./app/app.module.ngfactory在FactoryCallback的C:\ Projects\app-dnn-sxc-angular-dev\src'中(C:\ Projects\app-dnn-sxc-angular-dev \node_modules\webpack\lib\Compilation.js:276: 40)在解析器处的工厂(C:\ Projects\app-dnn-sxc-angular-dev \node_modules\webpack\lib\NormalModuleFactory.js:235:20)(C:\ Projects\app-dnn-sxc-angular- dev + node_modules\webpack\lib\NormalModuleFactory.js:60:20)asyncLib.parallel(C:\ Projects\app-dnn-sxc-angular-dev \node_modules\webpack\lib\NormalModuleFactory.js:127:20)在C:\ Projects\app-dnn-sxc-angular-dev \node_modules\async\dist\async.js:3874:9 at C:\ Projects\app-dnn-sxc-angular-dev \node_modules\async\dist\async.js:473:16 at iteratorCallback(C:\ Projects\app-dnn-sxc-angular-dev \node_modules\async\dist\async.js:1048:13)at C:\ Projects\app-dnn- sxc-angular-dev \node_modules\async\dist\async.js:958:16 at C:\ Projec …

我正在尝试显示ng4-loading-spinner对我的API进行HTTP调用的微调器.

我的代码基于以下链接中的示例:

• https://angular.io/guide/http#intercepting-all-requests-or-responses
• Angular4:使用HttpClient的拦截器来设置微调器

我的Angular 5应用程序有多个多个模块.HTTP拦截器位于"服务"模块中.

我认为我有一个依赖注入问题,因为当我使用Chrome Dev Tools调试代码时,代码HTTP拦截器代码无法执行.

API-interceptor.ts

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch'
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import {
    HttpEvent,
    HttpInterceptor,
    HttpHandler,
    HttpRequest,
    HttpResponse
} from '@angular/common/http';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

@Injectable()
export class ApiInterceptor implements HttpInterceptor {

    private count: number = 0;

    constructor(private spinner: Ng4LoadingSpinnerService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.count++;

        if (this.count == 1) this.spinner.show();

        let handleObs: Observable<HttpEvent<any>> = next.handle(req);

        handleObs
            .catch((err: …

我很抱歉模糊,但我真的不知道该提到什么,除了我收到这个错误!我不知道为什么除了我认为它与兼容版本有关.一切都在一台机器上运行.我把它克隆到另一个并且现在有这个错误.

我正在使用angularfire2运行Angular 5.

请告诉我哪些日志等会有所帮助.

谢谢,韦恩

我也在使用ngx-pwa-localStorage所以它可能有一些东西: Chrome控制台错误:请求的版本(1)小于现有版本(2)

下面是我的package.json

{
  "name": "scriptertainment",
  "version": "0.4.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "^0.4.6",
    "@angular-devkit/schematics": "0.0.52",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.2.10",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@angular/service-worker": "^5.2.10",
    "@ng-bootstrap/ng-bootstrap": "^1.1.0",
    "@ngx-pwa/local-storage": "^5.2.0",
    "angularfire2": "5.0.0-rc.6",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "^2.4.1",
    "firebase": "^4.12.0",
    "ionicons": "^3.0.0",
    "ngx-filter-pipe": "2.1.0",
    "ngx-swiper-wrapper": …

如果输入为空,如何禁用该按钮,并在用户开始输入输入时启用它,我试过:

<input #new_field type="text" autocomplete="off" />
<p-button (onClick)="saveNewField(new_field.value)" [disabled]="new_field.value ==''" label="Save"></p-button>

还有这个:

 <input [(ngModel)]="searchText" size="30" autocomplete="off" />
    <p-button (onClick)="saveNewField(searchText)" [disabled]="!searchText" label="Save"></p-button>

目前的行为

我将这些动态组件声明为模块中的入口组件,我也想在其中呈现它们.使用JIT它可以正常工作.以下结构有我的应用程序的一部分,我想渲染它们:app -> home (lazy) -> contracts (lazy) -> search.

所以我将这些组件添加到我用于的模块中search component/route.当我使用AOT进行编译时,每次访问搜索路径时,该应用程序都会告诉我没有组件工厂.当然我搜索谷歌并找到了一些结果:

我尝试将它们添加到ANALYZE_FOR_ENTRY_COMPONENTS提供程序中,我尝试.forRoot()在我的app.module中导入ModuleWithProviders,我也尝试在根模块(app.module)中导入和声明我的动态及其所有依赖组件.一切都导致了同样的错误.

我声明我的动态组件作为入口组件,如:所以

@NgModule({
  imports: [SharedComponentsModule, FinoSchemaFormsModule, TabGroupModule, FinoInputModule],
  declarations: [EnergySearchSettingsComponent, DslSearchSettingsComponent, MobileSearchSettingsComponent, ComparisonDetailSectionComponent],
  entryComponents: [EnergySearchSettingsComponent, DslSearchSettingsComponent, MobileSearchSettingsComponent],
  exports: [EnergySearchSettingsComponent, DslSearchSettingsComponent, MobileSearchSettingsComponent, ComparisonDetailSectionComponent],
  providers: [CategoryMappingProvider]
})
export class ComparisonComponentsModule { }

This module gets imported in the SearchModule我SearchComponent的声明.在这个组件中,我想使用ComponentFactoryResolverI注入动态渲染这些组件SearchComponent.

ngOnInit() {
    this.searchSettingsComponent = this.comparisonService.getSearchComponent(); // returns either EnergySearchSettingsComponent, DslSearchSettingsComponent or MobileSearchSettingsComponent
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(searchSettingsComponent); …

I have some specific requirement in that have to work with Existing URL. Existing URL's are already well indexed and used for promotions and many campaigns so no chance to modify it.

Existing URLs is like - www.xyz.com/search//65.5445/-122.56454/Listing-name/All

While In Angular defining URL like

const routes: Routes = [
  { path: '', component: SearchpagesComponent ,
    children: [
      {
        path: 'search/:schkey/:lat/:lng/:name/:filter', loadChildren: './search/search.module#SearchModule',
        // here schkey is optinal just required blank slashes 
      }
    ]
  }
];

and in Router link

<a …

我更新到 Angular 5.0.2，它需要 Typescript 2.4.2。我现在在尝试编译时收到此错误：

TypeError: Class extends value undefined is not a constructor or null

从我的研究来看，这似乎是一个循环依赖问题，但我不确定如何解决它。我有大量扩展基本模型的模型。例如（在伪代码中）：

在 base-model.ts

export class BaseModel {
    public name: string;
}

在 foo-model.ts

import {BaseModel} from './base-model';

export class FooModel extends BaseModel {}

在 bar-model.ts

import {BaseModel} from './base-model';
import {FooModel} from './foo-model';

export class BarModel extends BaseModel {
    public foo: FooModel;
}

在 index.ts

export * from './base-model';
export * from './foo-model';
export * from './bar-model';

在 bar.component.ts

import {BarModel} from './index';

@Component({}) …

我们最近刚刚将我们的应用程序 Angular 版本v5更新为新的更新表单支持的一部分，ngFormOptions以配置form elements某些事件的验证。以下是我们所做的：

<form class="example-form" autocomplete="off" [ngFormOptions]="{updateOn:'submit'}" [formGroup]="testform">

</form>

但它抛出以下错误

无法绑定到“ngFormOptions”，因为它不是“form”的已知属性

在更新后应用程序的依赖项下方。

包.json

"dependencies": {
    "@angular/animations": "5.0.0-rc.5",
    "@angular/common": "5.0.0-rc.5",
    "@angular/compiler": "5.0.0-rc.5",
    "@angular/core": "5.0.0-rc.5",
    "@angular/forms": "5.0.0-rc.5",
    "@angular/http": "5.0.0-rc.5",
    "@angular/platform-browser": "5.0.0-rc.5",
    "@angular/platform-browser-dynamic": "5.0.0-rc.5",
    "@angular/router": "5.0.0-rc.5",
    "core-js": "^2.4.1",
    "ng2-accordion": "0.0.15",
    "ngx-bootstrap": "^1.9.3",
    "ngx-popover": "0.0.16",
    "rxjs": "^5.5.2",
    "typescript": "2.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "^1.5.4",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": …

我正在使用以下代理配置构建 angular 2 应用程序。

代理配置文件

{ 
 "/": {
  "target": "http://localhost:6060",
  "secure": false,
  "changeOrigin": true,
  "logLevel": "debug" 
}}

我使用 spring boot 应用程序作为我的后端，它在端口 6060 上运行

我的包json的构建脚本如下

包.json

"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}

当我使用npm start 时，应用程序工作正常。所有后端请求都发送到http://localhost:6060

然后我使用构建生产版本

ng build --prod --proxy-config proxy.conf.json

并将生成的代码部署到 HTTP 服务器（apache 服务器）。然后我访问http://localhost/应用程序统计信息。但是当我尝试发出请求时，这些请求指向http://localhost/ ...而不是http://localhost:6060

我试图找到一些解决方案，但没有这些解决方案。请给我一些帮助。

谢谢