Angular [проблема с zone.js]



1. package.json

{
  ...
  "dependencies": {
    ...
    "zone.js": "0.6.21"
  }
...
}

Вот файл main.ts:
Вот код, который в этих условиях работает:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Вот код, который в этих условиях не работает:

import { NgModule } from "@angular/core";
import { routing } from "./app.routing";
import { HomeComponent } from "./home-component";
import { ProductDetailComponent } from "./product-detail-component";
import { LocationStrategy, HashLocationStrategy } from "@angular/common";
import { AppComponent } from "./app.component";
import { BrowserModule } from "@angular/platform-browser";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

@NgModule({
  imports: [BrowserModule, routing],
  declarations: [AppComponent, HomeComponent, ProductDetailComponent],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
  bootstrap: [AppComponent]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);

Маршруты:

import { HomeComponent } from "./home-component";
import { ProductDetailComponent } from "./product-detail-component";
import { RouterModule, Routes } from "@angular/router";

const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "product", component: ProductDetailComponent }
];
export const routing = RouterModule.forRoot(routes);

В чем ошибка?

Информации недостаточно чтобы ответить на вопрос. Если есть возможность, запакуй проект в zip и кинь ссылку на скачивание.

Ангуляр какой версии?

Гугление показывает что некоторые ошибки zone.js сложно понять, но есть возможность улучшить информативность стектрейса если импортировать этот модуль, который идет вкупе с zone.js https://github.com/angular/zone.js/blob/master/dist/zone-error.js вот так https://github.com/shihadsalam/angular5-springboot-frontend/blob/d88f3ef58c5aa51d5c65ba2ebf154462349acf74/src/environments/environment.ts#L4. Может это подтолкнет тебя к идее в чем проблема.

Это пример из книги по Angular 2. В книге весь проект не дан, а только в листингах есть файлы модуля, компонентов. Там даже если скачать код (набранный автором) примеров книги, то этот проект не запускается.

Если запустить код автора, выдает те же ошибки

Кажется это гиблое дело попытаться запустить код который ты кинул личке.

в файле trouble/node_modules/zone.js/dist/zone.js есть строка var fetchPromise = global['fetch'](); которая не работает ибо функция fetch ожидает 1 аргумент. Можешь попробовать запатчить (вообще так не делают, но только ради того чтобы запустился пример - можно разок) этот файл фручную заменив строку на var fetchPromise = global['fetch']('/');.

Но дальше проект все равно не запускается. Теперь проблема в тайпскрипте. И исправили ее только в версии 3. https://github.com/denoland/deno/issues/117

Но и тайпскрипт тоже можно запатчить вручную в trouble/node_modules/typescript/lib/typescript.js заменив

function base64encode(host, input) {
    if (host.base64encode) {
        return host.base64encode(input);
    }
    return convertToBase64(input);
}

на

function base64encode(host, input) {
    if (host && host.base64encode) {
        return host.base64encode(input);
    }
    return convertToBase64(input);
}

Но даже и проект не запускается уже с другими ошибками:

В общем. Забей на книгу и примеры. Ты, как я понимаю, хочешь учить ангуляр? Учи ангуляр последней версии. Все равно разница между последней и версией 2 должна быть существенной. Ангулярщики призываются чтобы подтвердить/опровергнуть этот тезис.

1 лайк

есть книга по 6-му. Прийдется штудировать инглиш

Лучше так чем нерабочие примеры. Все равно вся актуальная информация на английском, документация на английском да и коммьюнити больше по размеру на английском.

Я бы рекомендовал начать с официального сайта. У них есть довольно неплохое интро, называется “Tour of Heroes”. Конечно же на инглише, но без него в нашем ремесле никуда.

2 лайка