Angular Elements: возможно ли несколько пользовательских веб-компонентов из структуры проекта функционального модуля? - PullRequest
Новая
       8

Angular Elements: возможно ли несколько пользовательских веб-компонентов из структуры проекта функционального модуля?

0 голосов
/ 31 августа 2018

Я хочу создать несколько пользовательских веб-компонентов с angular6 и angular-элементами. Прямо сейчас у меня все работает, если все определено внутри app.module.ts напрямую.

Но мой проект состоит из нескольких функциональных модулей с собственными пользовательскими зависимостями, компонентами и т. Д. Внутри.

Я пытался расширить main.ts двумя загрузочными модулями, но это не сработало. 

 platformBrowserDynamic([{provide:LOCALE_ID,useValue:'de'}]).
   bootstrapModule(AppModule, {
    providers: [{provide: LOCALE_ID, useValue: 'de'}]
   })
.catch(err => console.log(err));

 platformBrowserDynamic([{provide: LOCALE_ID, useValue: 'de'}]).
  bootstrapModule(FeatureModule, {
   providers: [{provide: LOCALE_ID, useValue: 'de'}]
  })
.catch(err => console.log(err));

Как мне этого добиться или мне нужно поместить все свои функциональные модули в несколько «собственных» проектов?

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Вы можете добиться этого, загружая модули через angular.json: 

  "projects": {
   "angular-lazy-webcomponents": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "architect": {
     "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
          "lazyModules": [
            "src/app/module1/module-one.module",
            "src/app/module2/module-two.module"
          ]
     }
    }
   }
  }
 }
0 голосов
/ 31 августа 2018

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

Другие функции / компоненты могут быть импортированы по мере необходимости. Например, 

@NgModule({
    imports: [
        FeatureModules
    ],
    declarations: [ErrorComponent],
    providers: [
        Services
    ],
    bootstrap: [MainComponent]
})
export class AppModule {}

Если ваше приложение имеет несколько корней, вы можете включить их в массив, определенный с помощью начальной загрузки.

См. Документы Angular .

"Приложение запускается путем начальной загрузки корневого AppModule, который также называется entryComponent. Помимо прочего, процесс начальной загрузки создает компоненты, перечисленные в массиве начальной загрузки, и вставляет каждый из них в DOM браузера.

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

Хотя вы можете разместить более одного дерева компонентов на веб-странице хоста, большинство приложений имеют только одно дерево компонентов и загружают один корневой компонент.

Этот один корневой компонент обычно называется AppComponent и находится в массиве начальной загрузки корневого модуля. "

...