Angular 6: невозможно прочитать свойство 'runOutsideAngular' из неопределенного

Question

Я создал nav-bar, используя cli с помощью этой команды

ng g @angular/material:material-nav --name=version-nav

и импортируется в мой компонент как

<app-version-nav></app-version-nav>

и получил эту ошибку

Любое полезное предложение будет высоко оценено

Answer 1

Та же проблема возникла у меня после обновления до Angular 8.

Проблема с синтаксисом отложенной загрузки Angular 8 для маршрутов

Angular 8 имеет устаревший синтаксис отложенной загрузки для модулей в угловом маршрутизаторе, а именно

const routes: Routes = [{
    path: 'lazy',
    // The following string syntax for loadChildren is deprecated
    loadChildren: './lazy/lazy.module#LazyModule'
}];

Смотрите здесь для получения дополнительной информации: https://angular.io/guide/deprecations#loadchildren-string-syntax

Новый синтаксис:

const routes: Routes = [{
    path: 'lazy',
    // The new import() syntax
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

Новый синтаксис прекрасно работает в ng serve, но после компиляции с помощью ng build --prod результат завершается ошибкой с чем-то вроде Angular Compiler not loaded.

Причина в том, что angular компилируется заранее (AoT) по умолчанию, поэтому компилятор не включен в окончательную сборку. Это должно было быть исправлено в Angular 8, но похоже, что там есть ошибка.

В угловых документах сказано:

До версии 7 синтаксис import () работал только в режиме JIT (с механизмом просмотра).

Там также написано:

Синтаксис объявления: важно следовать синтаксису объявления маршрута loadChildren: () => import('...').then(m => m.ModuleName), чтобы позволить ngc обнаружить модуль с отложенной загрузкой и связанный с ним модуль NgModule. Вы можете найти полный список разрешенных синтаксических конструкций здесь . Эти ограничения будут ослаблены с выпуском Ivy, так как он больше не будет использовать NgFactories.

Первая попытка исправления (не работает)

Отключить компиляцию AoT и использовать JIT Compile с es215 в качестве цели TS

Это не работает, вместо этого выдает ошибку, описанную в этой теме во время выполнения:

    ERROR TypeError: Cannot read property 'runOutsideAngular' of undefined
    at new Fg (main-es2015.1dd434fee5a42300d69f.js:1)
    at new Bg (main-es2015.1dd434fee5a42300d69f.js:1)
    at Yu (main-es2015.1dd434fee5a42300d69f.js:1)
    at Ou (main-es2015.1dd434fee5a42300d69f.js:1)
    at Yg (main-es2015.1dd434fee5a42300d69f.js:1)
    at Ug (main-es2015.1dd434fee5a42300d69f.js:1)
    at $g (main-es2015.1dd434fee5a42300d69f.js:1)
    at Yg (main-es2015.1dd434fee5a42300d69f.js:1)
    at Ag (main-es2015.1dd434fee5a42300d69f.js:1)
    at Object.Qg [as createRootView] (main-es2015.1dd434fee5a42300d69f.js:1)

Вторая попытка исправления (работает)

Использование es5 в качестве цели с JIT-компиляцией

Это предложение flor-de-cantuta-tello-sarmient в этой теме. Это не сработало для меня в режиме компиляции AoT, там у меня было такое же угловое сообщение во время выполнения об отсутствующем компиляторе.

Но когда я скомпилировал мое приложение с ng build --prod --aot=false --build-optimizer=false с целью Typescript для es5, оно заработало ! ?

Может ли этот ответ быть полезным для более искушенных людей после обновления Версии 8!

Answer 2

Если у вас ничего не сработало по вышеуказанным ответам. Попробуйте установить npm. Может быть, вы скопировали и скопировали некоторые пакеты откуда-то, и они могут отсутствовать в вашем регионе. Это сработало для меня, так как у меня была та же проблема.

Answer 3

Вы можете изменить цель на es5 на tsconfig.js

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Answer 4

Я меняю цель на es5 и у меня работает.

Answer 5

Я не мог найти реальное решение этой проблемы, кроме как справиться с этой ситуацией, что я сделал !!!

Я создал новый угловой проект

ng new new-project --style=scss

и импортировал весь мой код, т.е. компоненты, службы и т. Д. В new-project, а затем создал side-nav

ng g @angular/material:material-nav --name=version-nav

и импортируется в компонент через директиву app-version-nav

<app-version-nav></app-version-nav>

Теперь боковая навигация работает нормально