Question

我在打字稿中有一个1.5角应用程序组件。我使用webpack作为构建工具。我有以下组件 -

import {Component} from "../../common/decorators"

const app = angular.module('app');
 @Component(app, {
  selector: 'navComponent',
  controllerAs: 'ctrl',
  styleUrls: './nav.style.scss',
  templateUrl: './nav.template.html'
 })
 class navComponent {
 static $inject = ['$scope', '$attrs', '$element'];

 constructor(private $element, $scope: ng.IScope, $attrs) { 

 }   
}

，装饰者是

export const Component = function(module: ng.IModule, options: {
  selector:string,
  controllerAs?: string,
  styleUrls?: string,
  template?: string,
  templateUrl?: string
}) {
  return (controller: Function) => {
   module.component(options.selector, angular.extend(options, {   controller: controller }));
 }
}

它在本地机器上工作正常但在完成webpack构建之后，它在使用bundle.js的生产中不起作用

这是我正在使用的装载机。

loaders: [
        {
            test: /\.html$/,
            loader: 'html-loader',
        }

以下是错误消息：

错误：[$ compile：tpload]无法加载模板：/components/nav/nav.template.html（HTTP状态：404未找到）

Answer 1

您可以尝试嵌入模板：

...
template: require('./nav.template.html')
...

如果您想使用单独的模板文件，可以使用CopyWebpackPlugin。但是，在部署应用程序时，您将为每个文件获得一个额外请求。

Answer 2

由于您正在使用es6模块导入，因此可以使用以下样式的import语句来导入HTML

RawImage

然后您可以在组件中参考以下模板

// class used for the callback with the texture
class AndroidBitmapPluginCallback : AndroidJavaProxy
{
    public AndroidBitmapPluginCallback() : base("com.unityexport.ian.unitylibrary.PluginInterfaceBitmap") { }
    public BrowserView BrowserView;

    public void onFrameUpdate(AndroidJavaObject jo, int width, int height, bool canGoBack, bool canGoForward)
        {
        AndroidJavaObject bufferObject = jo.Get<AndroidJavaObject>("Buffer");
        byte[] bytes = AndroidJNIHelper.ConvertFromJNIArray<byte[]>(bufferObject.GetRawObject());
        if (bytes == null)
            return;
        if (BrowserView != null)
        {
            UnityThread.executeInUpdate(()=> BrowserView.SetTexture(bytes,width,height,canGoBack,canGoForward));
        }
        else
            Debug.Log("TestAndroidPlugin is not set");

    }
 }


public class BrowserView : MonoBehaviour {
// Browser view needs a RawImage component to display webpages


   void Start () {
        _imageTexture2D = new Texture2D(Screen.width, Screen.height, TextureFormat.ARGB32, false);
        _rawImage = gameObject.GetComponent<RawImage>();
        _rawImage.texture = _imageTexture2D;

        #if !UNITY_EDITOR && UNITY_ANDROID
        // Get your Java class and create a new instance
        var tempAjc = new AndroidJavaClass("YOUR_LIBRARY.YOUR_CLASS")
        _ajc = tempAjc.CallStatic<AndroidJavaObject>("CreateInstance"); 
        // send the callback object to java to get frame updates
        AndroidBitmapPluginCallback androidPluginCallback = new AndroidBitmapPluginCallback {BrowserView = this};
        _ajc.Call("SetUnityBitmapCallback", androidPluginCallback);
        #endif

    }
   // Android callback to change our browser view texture
    public void SetTexture( byte[] bytes, int width, int height, bool canGoBack, bool canGoForward)
    {

        if (width != _imageTexture2D.width || height != _imageTexture2D.height)
            _imageTexture2D = new Texture2D(width, height, TextureFormat.ARGB32, false);

        _imageTexture2D.LoadImage(bytes);
        _imageTexture2D.Apply();
        _rawImage.texture = _imageTexture2D;
    }
}

现在这会加载您的模板，但是要在webpack构建过程中正确处理它（此处使用的是webpack 3），您可以使用html-loader

void Start () {
    foreach (Sprite texture in spriteImages) {
        GameObject button = Instantiate (shopButtonPrefab) as GameObject;
        button.GetComponentInChildren<Image>().sprite = texture;
        button.transform.SetParent (shopButtonContrainer.transform, false);

    }
}

这应该可以解决问题

在生产中通过webapack找不到angular templateurl

2 个答案: