标签: angular4

我尝试使用该命令将我的应用程序从Angular 2.4.10升级到4.0.0

"npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save". 

虽然在"npm install"期间没有错误,但在"npm run build"期间我收到了以下错误.我按照changelog中的指示将"lib"添加到compilerOptions.

ERROR in [default]
File '/node_modules/bootstrap-loader/loader.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

ERROR in [default]
File '/node_modules/core-js/es6/index.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

ERROR in [default]
File '/node_modules/fullcalendar/dist/fullcalendar.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

ERROR in [default]
File '/node_modules/hammerjs/hammer.js' has unsupported extension. The only supported extensions …

目前,该应用程序是在Angular 2.0.0上.为了与Angular 4兼容,需要更改哪些包或依赖项？到目前为止,我改变了以下内容,

"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@angular/router": "4.0.0",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "4.0.0",
"angular2-toaster": "2.0.0",
"rxjs": "^5.0.1",
"typescript": "^2.1.5",
"zone.js": "^0.8.4"
}

是否还有其他需要更改的包/依赖项？

我应该更改tsconfig.json吗？

{


 "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "es5",
      "es2015",
      "es2017",
      "dom",
      "scripthost"
    ],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": true,
    "allowNonTsExtensions" : true
  },
  "exclude": [
    "node_modules",
    "typings/main.d.ts",
    "typings/main"
  ],
  "filesGlob": [
    "./src/**/*.ts",
    "./test/**/*.ts",
    "!./node_modules/**/*.ts",
    "src/custom_typings.d.ts",
    "typings/browser.d.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "resolveGlobs": …

这里简单的演示:https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview(我使用官方的angular.io/docs演示应用程序)

问题是:第一个屏幕加载器(我使用loader.svg)动画在Angular App的初始加载过程中冻结了一秒钟

过程如下:打开页面,svg加载器动画启动 - >加载器动画冻结 - >加载器动画重新启动 - >角度应用程序完成加载,加载器隐藏

在这个演示中,冻结更明显:http://iarouse.com/dist-angular2-material/v1/

<my-app>
  <!-- the loader -->
  <div id="loader-container"></div>
</my-app>

我的真实应用程序更大,初始加载器动画在引导过程中冻结了几秒钟,这令人沮丧

我能做些什么让它变得光滑？

我正在将一个ASP.NET Core项目从AngularJS升级到Angular 4.现在Angular Universal(社区分支)已经集成到Angular本身,我想尝试服务器预渲染.

使用Vue 2和ASP.NET Core进行预渲染非常优雅(例如http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/).

是否有关于将Angular 4服务器预渲染与ASP.NET Core 集成的类似示例或教程,避免从Angular Universal样本进行任何重构？

在AngularJS中,我使用ui-router重定向我的应用程序内部(更改状态).

它有2个可能的重定向选项

• 在模板中 ui-sref='stateName'
• 在控制器中 $state.go()

我刚刚开始玩Angular(4),我发现只有这样才能改变模板中的路径:

• 模板 routerLink="routePath"

是否存在某种方式,因为在ui-router中有从组件改变路由的方式？

我正在创建一个表单，从后端获取字段。映射后，我有这样的东西：

genericFilters: {
        iboId: {
            'display': false,
            'template': ''
        },
        iboCode: {
            'display': true,
            'template': 'text_input_iboCode',
            /*'template': 'text/iboCode'*/
        },
        iboName: {
            'display': true,
            'template': 'text_input_iboName'
        },
        iboSurname: {
            'display': true,
            'template': 'text_input_iboSurname'
        },
        iboRank: {
            'display': false,
            'template': 'multiselect_iboRank',
            /*'template': 'select/multi_iboRank',*/
        },
        iboEmail: {
            'display': false,
            'template': 'text_input_iboEmail'
        },
        iboNewsletter: {
            'display': true,
            'template': 'simple_select_iboNewsletter',
            /*'template': 'select/simple_iboNewsletter',*/
        },
    };

我的想法是在应用程序级别为表单字段创建每个字段类型（checkbox、multiselect、text、等）。radio并使用上面的映射JSON将某种字段类型应用于从后端接收的每个字段。

在我的示例中，该字段iboId应具有字段类型<text_input_iboCode>。

所以，在我看来，我不想有这样的事情：

<text_input_iboCode></text_input_iboCode>
<text_input_iboName></text_input_iboName>
<text_input_iboSurname></text_input_iboSurname>

我实际上想让表单创建更抽象，如下所示： …

组件模板中有一些自定义元素和属性（在此示例中，第三方非角度代码使用了它们）：

<foo></foo>
<div data-bar="{{ bar }}"></div>

它们会导致编译器错误：

Template parse errors:
'foo' is not a known element:
1. If 'foo' is an Angular component, then verify that it is part of this module.
2. If 'foo' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
    [ERROR ->]<foo></foo>
    <div data-bar="{{ bar }}"></div>
  "): App@1:4
Can't bind to 'bar' since it isn't a known property of 'div'. ("
    <foo></foo>
    <div [ERROR ->]data-bar="{{ bar }}"></div> …

当我尝试运行看起来像这样的Angular4时,我突然看到一个错误......

ERROR ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error
Error
at Error.ZoneAwareError (http://localhost:4200/vendor.……}message: (...)name: (...)originalStack: (...)promise: ZoneAwarePromiserejection: Errorstack: (...)task: ZoneTasktoSource: function ()toString: function ()zone: ZonezoneAwareStack: (...)__zone_symbol__error: Error: Uncaught (in promise): 
Error
Error
at Error.ZoneAwareError (http://localhost:4200/vendor.bundle.js:97291:33)
at ZoneAwareError (http://localhost:4200/vendor.bundle.js:97288:35)
at injectionError (http://localhost:4200/vendor.bundle.js:2061:86)
at noProviderError (http://localhost:4200/vendor.bundle.js:2099:12)
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:3601:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:3640:25)
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:3572:25)
at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:3441:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:4200/vendor.bundle.js:4406:52)
at resolveDep (http://localhost:4200/vendor.bundle.js:11810:45)
at createClass (http://localhost:4200/vendor.bundle.js:11673:147)
at createDirectiveInstance (http://localhost:4200/vendor.bundle.js:11504:37)
at createViewNodes (http://localhost:4200/vendor.bundle.js:12853:49)
at createRootView (http://localhost:4200/vendor.bundle.js:12758:5)
at callWithDebugContext (http://localhost:4200/vendor.bundle.js:13889:42)
at Error.ZoneAwareError (http://localhost:4200/vendor.bundle.js:97291:33) …

我已将Angular 2升级为Angular 4.当我运行我的项目时,我面临以下错误.

node_modules/@ angular/platform-b​​rowser/platform-b​​rowser"'没有导出成员'AnimationDriver'.

我正在使用angular.io quickstart种子:https://angular.io/docs/ts/latest/guide/setup.html

我正在使用Angular4和打字稿JIT

目前我想添加lodash所以我可以在我的组件中使用它然后做一个npm运行构建,例如tsc -p src /"并没有得到任何错误

我的组件:

import { Component } from '@angular/core';
import * as _ from 'lodash';

@Component({
  moduleId: module.id,
  selector: 'HomeComponent',
  templateUrl: 'home.component.html'
})

export class HomeComponent {

    constructor() {
      console.log(_.last([1, 2, 3]));
      console.log('hello');
    }

}

我的systemjs.config:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where …

我正在尝试编写一个在Angular的ngModel属性上断言的测试.此时,我可以轻松测试标签.但是,我无法从中选择值ngModel

问题从中获取价值的最佳方法是什么ngModel？

HTML:

<div name="customerName">
    <label>Customer Name: </label>
    <div>
        <input type="text" class="form-control" [ngModel]="customer.name" asInline disabled />
    </div>
</div>

测试

it('bindings', () => {
    fixture = TestBed.createComponent(CustomerComponent);
    fixture.detectChanges();

    // this works
    expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] label').textContent).toEqual('Customer Name: '); 
    // this assert fails
    expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] div input').value).toEqual('Bobby Tables'); 
});

我已经切换到Angular4.0.0-rc.1,看起来ES5测试包包含ES2015代码.

我收到这个错误:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Unexpected token 'const'
    at webpack:///~/@angular/core/@angular/core/testing.es5.js:10:0 <- src/test.ts:16345

还发现了Angular repo的相关问题.

经过升级我Angular2项目Angular4使用:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

我使用时收到以下错误ng build --prod:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'D:\workspace\MyProject\src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

没有--prod旗帜,我没有任何错误.stackoverflow上有一些类似的问题,但没有任何可接受的答案,与Angular4的升级无关.这是我的package.json:

{
  "name": "MyProject",
  "version": "0.0.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/animations": …