Question

我需要使用SPA PHP框架和此站点上的Laravel个组件来创建常规网站（没有Angular！）。

例如：

有可能吗？如果是，该怎么办？

Answer 1

有可能，但这确实是一个**。我上个月在Java Spring上做了一个。基本上，您必须在手动检查元素是否存在之后重新引导每个元素

app.module.ts

import { NgModule, Inject } from '@angular/core';
import { BrowserModule, DOCUMENT }  from '@angular/platform-browser';

// Add all components to this array
const components: any[] = [
  //normal components goes here
    LoginFormComponent
];

// Bootstrap components
const mainComponents: any[] = [
  AngularComponent
];

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    .
    .
    .
  ],
  providers: [...],
  declarations: components,
  entryComponents: mainComponents
})
export class AppModule { 
  private browser_document: any;

  // this bootstraps each main component
  ngDoBootstrap(app: any) {
    for(let component of mainComponents) {
      if (this.browser_document.getElementsByTagName(component.selector).length > 0) app.bootstrap(component);
    }
  }

  constructor(@Inject(DOCUMENT) private document: any) {
    this.browser_document = document;
  }
}

angular.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'angular-component',
    templateUrl: './valuation.requests.view.component.html'
})
export class AngularComponent {
    static selector: String = 'angular-component'; // this is important
}

something.html

<angular-component></angular-component>

基本上，您必须在检查DOM中是否存在每个子组件后对其进行引导

PS：主要组件需要同时添加components和mainComponents数组

Answer 2

最近我不得不做同样的事情，我发现的解决方案并不那么复杂。

我有两个项目。树如下：

angular-app
laravel-app

1。在Laravel的公用文件夹中创建指向您的角度距离的符号链接。

cd laravel-app/public
ln -s ../../angular-app/dist/angular-app/ angular

2。像这样设置您的Laravel .env ：

APP_ENV=local
APP_URL=http://localhost:8000
APP_URL_ANGULAR=http://localhost:4200

3。设置您的Laravel路线：

Route::get('/angular-app/{route}', function() {
  return view('my-page');
})
->name('laravel.index')
->where('route', '[a-z-\/0-9]+');

只要URL包含“ angular-app”前缀，无论调用哪个Angular路由，Laravel都将返回其视图。 Laravel页面将包含Angular应用程序。 Angular路由将处理其余部分。

4。将此代码添加到您的Blade模板中：

<app-root></app-root> 
@if (getenv('APP_ENV') != 'local') 
    <script src="{{ getenv('APP_URL') }}/angular/runtime-es2015.js" type="module"></script> 
    <script src="{{ getenv('APP_URL') }}/angular/runtime-es5.js" nomodule defer></script> 
    <script src="{{ getenv('APP_URL') }}/angular/polyfills-es5.js" nomodule defer></script> 
    <script src="{{ getenv('APP_URL') }}/angular/polyfills-es2015.js" type="module"></script> 
    <script src="{{ getenv('APP_URL') }}/angular/styles-es2015.js" type="module"></script> 
    <script src="{{ getenv('APP_URL') }}/angular/styles-es5.js" nomodule defer></script> 
    <script src="{{ getenv('APP_URL') }}/angular/vendor-es2015.js" type="module"></script> 
    <script src="{{ getenv('APP_URL') }}/angular/vendor-es5.js" nomodule defer></script> 
    <script src="{{ getenv('APP_URL') }}/angular/main-es2015.js" type="module"></script> 
    <script src="{{ getenv('APP_URL') }}/angular/main-es5.js" nomodule defer></script> 
@else 
    <script src="{{ getenv('APP_URL_ANGULAR') }}/runtime.js?t={{ time() }}" type="module"></script> 
    <script src="{{ getenv('APP_URL_ANGULAR') }}/polyfills.js?t={{ time() }}" type="module"></script> 
    <script src="{{ getenv('APP_URL_ANGULAR') }}/styles.js?t={{ time() }}" type="module"></script> 
    <script src="{{ getenv('APP_URL_ANGULAR') }}/vendor.js?t={{ time() }}" type="module"></script> 
    <script src="{{ getenv('APP_URL_ANGULAR') }}/main.js?t={{ time() }}" type="module"></script> 
@endif

不要忘记：

<base href="/">

...在头标签之间。

在本地环境中，我们将包括ng serve生成的所有文件。这将使我们能够在文件更改时重建Angular应用程序。在任何其他环境中，我们都将使用符号链接来定位Angular应用程序的构建。

5。测试应用

首先，更新您的angular.json：

"serve": { 
  "builder": "@angular-devkit/build-angular:dev-server", 
  "options": { 
    "browserTarget": "angular-app:build", 
    "publicHost": "http://localhost:4200" 
  }, 
  […] 
},

然后提供您的应用程序：

php artisan serve –port=8000
ng serve --host 0.0.0.0 --disable-host-check --port 4200

就像您一样，我没有找到很多有关此主题的信息，因此我写了一篇文章，其中包含更多详细信息： https://medium.com/@z3c33/how-to-integrate-an-angular-application-in-laravel-9f6021b573e4

基于带有Angular组件的Laravel的网站

2 个答案: